<template>
  <!-- 这是我的购物车页面 -->
  <div class="container">
    <!-- 卡片视图 -->
    <el-card>
      <!-- 页头 -->
      <el-page-header @back="goBack" content="我的购物车"> </el-page-header>
      <br />
      <!-- 购物车内容 -->
      <el-table
        @selection-change="handleSelectionChange"
        :data="CartList"
        height="500"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!-- 商品复选框 -->
        <el-table-column
          type="selection"
          width="85"
          align="center"
        ></el-table-column>
        <!-- 商品图片 -->
        <el-table-column align="center" width="150">
          <template slot-scope="scope">
            <el-image :src="imgSrc(scope.row.commodityImagesId)">
              <!-- 图片预加载 -->
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <!-- 商品名称 -->
        <el-table-column
          prop="commodityName"
          label="商品名称"
          width="300"
          align="center"
        >
        </el-table-column>
        <!-- 商品单价 -->
        <el-table-column
          prop="commodityPrice"
          label="单价"
          width="150"
          align="center"
        >
        </el-table-column>
        <!-- 已选的参数 -->
        <el-table-column
          prop="commodityParams"
          label="参数"
          width="200"
          align="center"
        >
        </el-table-column>
        <!-- 数量和计数器 -->
        <el-table-column label="数量" width="300" align="center">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.commodityNum"
              @change="handleChange(scope.row.id, scope.row.commodityNum)"
              :min="1"
              :max="1000"
            ></el-input-number>
          </template>
        </el-table-column>
        <!-- 操作删除按钮 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click.native.prevent="handleDelete(scope.row.id)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 结算的卡片 -->
      <el-card class="js-card">
        <!-- 删除选中商品 -->
        <el-link :underline="false" @click="batchDel()">删除选中商品</el-link>
        <!-- 合计 -->
        <div class="hj">
          已选商品 <span>{{ totalNumber }}</span
          >件 合计: <span>{{ totalPrice }}</span
          >元
        </div>
        <!-- 结算按钮 -->
        <div class="js">
          <el-button type="primary" @click="go" round>结算</el-button>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //选中数据
      selectedCarts: [],
      // 用户id
      uId: '',
      // 购物车列表数据
      CartList: [],
      // 随机生成的订单号
      form: {
        number: 0
      }
    }
  },
  // 钩子
  created () {
    // 获取用户id
    this.uId = window.localStorage.getItem('userId')
    // 获取购物车列表
    this.getCartList()
    // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
    // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
    this.form.number = this.getProjectNum() + Math.floor(Math.random() * 100000)
  },
  // 方法
  methods: {
    // 获取购物车列表
    async getCartList () {
      const { data: res } = await this.$http.get('ShoppingCarts/uId/' + this.uId)
      if (res.meta.status !== 200) {
        // 获取购物车列表失败
        this.$message.error('获取购物车列表失败！')
      } else {
        // 数据赋值
        this.CartList = res.data
      }
    },
    // 获取当前日期的方法(用于随机生成订单号)
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year)
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    // 图片地址
    imgSrc (id) {
      // 截取第一位
      const imgId = id.slice(0, 1)
      const url = "https://api.h1234.top/files/" + imgId
      return url
    },
    //跳转支付页面
    async go () {
      if (this.selectedCarts.length === 0) {
        this.$confirm("请至少选中一件商品", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
      } else {
        // 用于存放每个商品的商品id
        let goodsIdArr = []
        // 循环遍历购物车商品数组
        for (let index = 0; index < this.CartList.length; index++) {
          console.log(this.CartList[index]);
          goodsIdArr.push(this.CartList[index].commodityId)
        }
        const { data: res } = await this.$http.post('CommodityOrders', {
          // 用户id
          FromUserId: this.uId - 0,
          // 商品id，数组转字符串
          CommodityInfo: goodsIdArr.toString(),
          // 总金额
          PaymentAmount: this.totalPrice,
          // 订单号
          OrderNumber: this.form.number
        })
        if (res.meta.status !== 200) {
          // 生成订单失败
          this.$message.error('生成订单失败！')
        } else {
          // 成功
          this.$message.success('生成订单成功！')
        }
        //跳转支付页面
        this.$router.push('/pay?id=' + res.data.id)
      }
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.selectedCarts = selection
    },
    //计数器
    async handleChange (res, value) {
      const { data: result } = await this.$http.put(`ShoppingCarts/${res}`, {
        commodityNum: value
      })
      if (result.meta.status !== 200) {
        this.$message.error('数量修改失败！')
      } else {
        this.$message.success('数量修改成功！')
      }
    },
    // 单个删除
    handleDelete (id) {
      this.$confirm("此操作将永久删除该条模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const { data: res } = await this.$http.delete('ShoppingCarts/' + id)
        if (res.meta.status !== 200) {
          // 删除商品失败
          this.$message.error('删除商品失败！')
        } else {
          // 删除商品成功
          // 重新获取购物车列表
          this.getCartList()
          this.$message.success('删除商品成功！')
        }
      }).catch(() => {
        this.$message.info('已取消操作！')
      })
    },
    // 批量删除
    batchDel () {
      if (this.selectedCarts.length === 0) {
        this.$message.info('请至少勾选一项，再进行操作！')
      } else {
        // 调用批量删除方法
        this.speedupData()
      }
    },
    // 批量删除方法
    speedupData () {
      this.$confirm("此操作将多条记录永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //遍历获得多选选中的index值
        this.selectedCarts.forEach(async value => {
          const { data: res } = await this.$http.delete('ShoppingCarts/' + value.id)
          if (res.meta.status !== 200) {
            // 删除商品失败
            this.$message.error('删除商品失败！')
          } else {
            // 删除商品成功
            //遍历多选框获取的数据
            this.CartList.forEach((v, i) => {
              //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值
              if (value.id == v.id) {
                this.CartList.splice(i, 1)
              }
            })
          }
        })
        this.$message.success('删除商品成功！')
      }).catch(() => {
        // 取消删除
        this.$message.info('已取消删除！')
      })
    },
    // 返回首页
    goBack () {
      this.$router.push('/')
    }
  },
  // 计算属性
  computed: {
    // 总价
    totalPrice () {
      var price_total = 0
      for (var i = 0; i < this.selectedCarts.length; i++) {
        price_total += this.selectedCarts[i].commodityPrice * this.selectedCarts[i].commodityNum
      }
      return price_total
    },
    // 总数
    totalNumber () {
      var number_total = 0
      for (var i = 0; i < this.selectedCarts.length; i++) {
        number_total += this.selectedCarts[i].commodityNum
      }
      return number_total
    }
  }
}
</script>

<style lang="css" scoped>
/* 整体容器 */
.container {
  width: 100%;
  height: 100%;
  margin-top: -4vh;
}

/* 结算按钮 */
.js {
  display: flex;
  justify-content: flex-end;
}

/* 结算卡片 */
.js-card {
  background-color: rgb(245, 250, 255);
}

/* 合计 */
.hj {
  display: flex;
  justify-content: flex-end;
}
</style>
